<template>
  <div class="common-layout">
    <el-container>
      <!--      左侧菜单-->
      <el-aside class="el-aside" :class="{ collapsed: isCollapse }">
        <el-menu
          background-color="#00152b"
          text-color="#fff"
          class="el-menu"
          :collapse="isCollapse"
        >
          <div class="logo" style="display: flex">
            <img src="/logo.png" alt="" />
            <span class="project-name" v-if="!isCollapse">Mathmall后台系统</span>
          </div>
          <!--          首页-->
          <el-menu-item @click="toIndex">
            <el-icon>
              <HomeFilled />
            </el-icon>
            <span style="font-size: 1rem">首页</span>
          </el-menu-item>
          <!--          数据大屏-->
          <el-menu-item @click="screen">
            <el-icon>
              <Platform />
            </el-icon>
            <span style="font-size: 1rem">数据大屏</span>
          </el-menu-item>
          <!--          权限管理-->
          <el-sub-menu index="1">
            <template #title>
              <el-icon>
                <Lock />
              </el-icon>
              <span style="font-size: 1rem">权限管理</span>
            </template>
            <el-menu-item index="1-1" @click="userManagement">
              <template #title>
                <el-icon><User /></el-icon>
                <span style="font-size: 1rem">用户管理</span>
              </template>
            </el-menu-item>
            <el-menu-item index="1-2" @click="roleManagement">
              <template #title>
                <el-icon><UserFilled /></el-icon>
                <span style="font-size: 1rem">角色管理</span>
              </template>
            </el-menu-item>
            <el-menu-item index="1-3" @click="menuManagement">
              <template #title>
                <el-icon><Menu /></el-icon>
                <span style="font-size: 1rem">菜单管理</span>
              </template>
            </el-menu-item>
          </el-sub-menu>
          <!--          商品管理-->
          <el-sub-menu index="2">
            <template #title>
              <el-icon>
                <ShoppingTrolley />
              </el-icon>
              <span style="font-size: 1rem">商品管理</span>
            </template>
            <el-menu-item index="2-1" @click="brandManagement">
              <template #title>
                <el-icon>
                  <ShoppingCart />
                </el-icon>
                <span style="font-size: 1rem">品牌管理</span>
              </template>
            </el-menu-item>
            <el-menu-item index="2-2" @click="attrRequest">
              <template #title>
                <el-icon>
                  <Operation />
                </el-icon>
                <span style="font-size: 1rem">属性管理</span>
              </template>
            </el-menu-item>
            <el-menu-item index="2-5" @click="categoryRequest">
              <template #title>
                <el-icon>
                  <Operation />
                </el-icon>
                <span style="font-size: 1rem">分类管理</span>
              </template>
            </el-menu-item>
            <el-menu-item index="2-3" @click="spuRequest">
              <template #title>
                <el-icon>
                  <Grid />
                </el-icon>
                <span style="font-size: 1rem">SPU管理</span>
              </template>
            </el-menu-item>
            <el-menu-item index="2-4">
              <template #title>
                <el-icon>
                  <Grid />
                </el-icon>
                <span style="font-size: 1rem">SKU管理</span>
              </template>
            </el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-aside>
      <!--右侧头部及主内容区-->
      <el-container>
        <!--头部-->
        <el-header class="el-header">
          <div class="header-left">
            <el-radio-group v-model="isCollapse">
              <el-radio-button :value="false">展开</el-radio-button>
              <el-radio-button :value="true">折叠</el-radio-button>
            </el-radio-group>
            <el-icon style="margin: 0 0.5rem">
              <component :is="$route.meta.icon"></component>
            </el-icon>
            <el-breadcrumb :separator-icon="ArrowRight" class="header-nav">
              <el-breadcrumb-item>{{ $route.meta.title }}</el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <div class="setting">
            <el-button :icon="Refresh" circle @click="refresh" />
            <el-button :icon="FullScreen" circle @click="fullScreen" />
            <el-button :icon="Setting" circle />
            <img :src="avatar" alt="" />
            <el-dropdown>
              <span class="el-dropdown-link">
                <el-icon class="el-icon-right">
                  <ArrowDown />
                </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="exit">退出</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </el-header>
        <el-main>
          <div class="el-main">
            <router-view />
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import {
  ArrowDown,
  ArrowRight,
  FullScreen,
  Grid,
  HomeFilled,
  Lock,
  Operation,
  Platform,
  Refresh,
  Setting,
  ShoppingCart,
  ShoppingTrolley,
  User,
  UserFilled,
} from '@element-plus/icons-vue'
import { onMounted, ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
// 定义头像
const avatar = ref<string>('')
// 左侧菜单折叠变量
let isCollapse = ref(false)
onMounted(() => {
  avatar.value = localStorage.getItem('avatar')!
})
// 刷新按钮点击事件
const refresh = () => {
  location.reload()
}
// 全屏按钮点击事件
const fullScreen = () => {
  if (!document.fullscreenElement) {
    document.documentElement.requestFullscreen()
  } else {
    document.exitFullscreen()
  }
}
const $router = useRouter()
const $route = useRoute()
// 退出按钮点击事件
const exit = () => {
  localStorage.removeItem('avatar')
  localStorage.removeItem('token')
  $router.push({ name: 'LoginView' })
}
// 首页按钮单击事件
const toIndex = () => {
  $router.push({ name: 'IndexView' })
}
// 数据大屏按钮单击事件
const screen = () => {
  $router.push({ name: 'ScreenView' })
}
// 用户管理按钮单击事件
const userManagement = () => {
  $router.push({ name: 'UserView' })
}
// 角色管理单击事件
const roleManagement = () => {
  $router.push({ name: 'RoleView' })
}
// 菜单管理
const menuManagement = () => {
  $router.push({ name: 'MenuView' })
}
// 品牌管理点击事件
const brandManagement = () => {
  $router.push({ name: 'BrandView' })
}
// 属性管理单击事件
const attrRequest = () => {
  $router.push({ name: 'AttrView' })
}
// 属性管理树形单击事件
const categoryRequest = () => {
  $router.push({ name: 'CategoryView' })
}
// SPU管理单击事件
const spuRequest = () => {
  $router.push({ name: 'SPUView' })
}
</script>

<style scoped>
.el-aside {
  background-color: #00152b;
  padding: 1rem 0.5rem;
  overflow: hidden;
  color: white;
  width: 16.5rem;
  transition: width 0.5s;

  &.collapsed {
    transition: width 0.5s;
    width: 4.375rem;
  }

  .el-menu {
    border: none;
  }

  img {
    width: 2.5rem;
    height: 2.5rem;
  }

  .logo span {
    text-align: center;
    font-size: 1.4rem;
    font-weight: 700;
    color: white;
    height: 3rem;
    line-height: 3rem;
    margin: 0 0.25rem;
  }
}

.el-header {
  background-color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 4rem;
  border-bottom: solid 1px #e4e7ed;

  .header-left {
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  .setting {
    display: flex;
    align-items: center;
    justify-content: space-evenly;

    img {
      border-radius: 50%;
      width: 2rem;
      height: 2rem;
      margin: 0 0.5rem;
    }
  }
}

.el-main {
  height: calc(100vh - 4rem);
  padding: 0;
}
</style>
